@extends('frontend/layouts/default')
@section('title')
{{ $data['lesson']->title }} - Bài giảng guitar đệm hát
@stop
@section('content')
<!--content left-->
<div class="default-width-left">
<div class="overH">
    <div class="step FL">
        <div class="line-cl">
            <div class="btn-up">
                <a href="#" class="icon-up">&nbsp;</a>
            </div>
        </div>
        <div class="title-step">
            <div class="FL MgR5">
                <img class="icon-arrow-left"/>
            </div>
            <div class="tt-step">
                <p>Giáo trình Guitar đệm hát - level 3 </p>
            </div>
        </div>
        <ul class="step-number">
            <? for ($i = 1; $i <= 10; $i++): ?>
                <li <?= ($i == $data['lesson']->level) ? 'class="active"' : '' ?>>
                    <a <?= ($i == $data['lesson']->level) ? 'class="active"' : '' ?>>
                        <?= $i ?>
                    </a>
                </li>
            <? endfor ?>
        </ul>
    </div>
    <ol class="breadcrumb" style="margin:10px 0 0 20px">
        <li><a href="#">Home</a></li>
        <li><a href="#">Library</a></li>
        <li class="active">Data</li>
    </ol>
    <div class="conten-movie">
        <div>
            <ul>
                <li>
                    <div class="MgL15">
                        <h1 class="font21 color55">
                            <a href="<?= route('bai-giang', array('id' => $data['lesson']->id, 'slug' => $data['lesson']->slug)) ?>">
                                <?= $data['lesson']->title ?>
                            </a>
                        </h1>

                        <div class="color66 font12">
                            Đăng <?= date('d/y/Y', strtotime($data['lesson']->created_at)) ?>
                            vào <?= date('H:i', strtotime($data['lesson']->created_at)) ?></div>
                        <div class="MgT7 overH">
                            <div class="listcomment FL">
                                <span class="number"><?= $data['lesson']->comments()->count() ?></span>
                                <span>Bình luận</span>
                            </div>
                            <div class="FL MgL5">
                                <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
                            </div>
                        </div>
                    </div>

                    <div class="MgT15">
                        @if(!empty($data['lesson']->youtube))
                        <div class="embed-responsive embed-responsive-16by9">
                            <iframe class="embed-responsive-item"
                                    src="http://www.youtube.com/embed/<?= $data['lesson']->youtube ?>"></iframe>
                        </div>
                        @endif
                    </div>
                </li>
            </ul>
        </div>
        <div class="infor-clip-baigiang">
            <div class="fl-infor">
                <div class="avatar-lf">
                    <img src="<?= $data['user']->avatar_link() ?>" alt=""/>
                </div>
                <div class="ct-lf">
                    <a href="<?= route('thanh-vien', array('id' => $data['user']->id, 'slug' => Str::slug($data['user']->username))) ?>"
                       class="font-Bold font14"><?= $data['user']->username ?></a>

                    <div class="font11 color99">GURU - Đệm hát Level 10</div>
                    <div>
                        <a class="btn0follow" href="#"><i class="fa fa-plus">&nbsp;</i>Theo dõi</a>
                    </div>
                </div>
            </div>
            <div class="fr-infor">
                <div class="statistic">
                    <div class="left">
                        <span class="font30 colorRed"><?= $data['lesson']->thanks ?></span>
                        <span>Bình chọn</span>
                    </div>
                </div>
                <div>
                    <a href="#" class="btn-down">BÌNH CHỌN BÀI NÀY</a>
                </div>
            </div>
        </div>
        <div class="box-infor-clip" style="margin:20px 0 0 0">
            <?= $data['lesson']->content ?>
            <!--            <a href="#" class="btn-view-more">Xem thêm</a>-->
        </div>
    </div>
</div>
<!--tu khoa-->
<div class="MgT15">
    <div class="title">
        <label>Từ chuyên môn trong bài</label>
        <span class="color55">Hãy bấm vào để xem chi tiết</span>
    </div>
    <div class="MgL5">
        <a href="#">Quat cha</a>
        <a href="#">Quat cha</a>
        <a href="#">Quat cha</a>
    </div>
</div>
<div class="MgT15">
    <div class="title">
        <label>Từ khóa</label>
    </div>
    <div class="MgL5 tags">
        <a href="#">Quat cha</a>
    </div>
</div>
<!--tu khoa end-->

<!--comment facebook-->
<div class="MgT20 comment-face">
    @include('commons/comments/comment')
</div>
</div>
<!--end content left-->
<!--content right-->
<div class="default-width-right">
<!--search top-->
<div class="box-search MgT15">
    <input type="text" onfocus="javascript:if(this.value=='Bạn hãy nhập thông tin tìm kiếm'){this.value='';};"
           onblur="javascript:if(this.value==''){this.value='Bạn hãy nhập thông tin tìm kiếm';};"
           value="Bạn hãy nhập thông tin tìm kiếm" id="input_searchword" name="searchword" autocomplete="off"
           class="in-search">
    <a href="#" class="btn-search search"></a>
</div>
<!--search top end-->
<!--Tabs-->
<div>
<div id="tabs_1">
<ul class="nav nav-tabs bg-tab-tt" role="tablist">
    <li class="active tt-tab-r"><a href="#tabs-3" role="tab" id="tabs-1-tab" data-toggle="tab">Ghi chú</a></li>
    <li class="tt-tab-r"><a class="db" href="#tabs-4" role="tab" id="tabs-2-tab" data-toggle="tab">Hỏi đáp giảng
            viên</a></li>
    <li class="tt-tab-r"><a href="#tabs-5" role="tab" id="tabs-3-tab" data-toggle="tab">Hợp âm</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div id="tabs-3" class="tab-pane fade in active" role="tabpanel">
    <div class="notes">
        <ul>
            @for($i = 0; $i <=10; $i++)
            <li>
                <div class="numbers">1</div>
                <div class="ct-note">
                    Tại BOMB BEER, điều các bạn nhận được không chỉ là dịch vụ chu đáo đến từ các nhân viên xinh đẹp và
                    nhiệt tình mà còn là niềm vui không bao giờ dứt. Bởi lẽ với chúng tôi, niềm mãn nguyện lớn nhất
                    chính là sự hài lòng của các bạn.
                </div>
            </li>
            @endfor
        </ul>
    </div>
</div>
<div id="tabs-4" class="tab-pane fade" role="tabpanel">
    <div class="notes" style="border-bottom:none">
        <div class="comment-list">
            <ul class="list-cmts">
                <li>
                    <div class="lf-avatar">
                        <a href="#"><img src="../images/avatar2.jpg" alt=""></a>
                    </div>
                    <div class="lr-content">
                        <div>
                            <a href="#" class="font-Bold colorDackG">Bachocdientkxx</a>
                            <span class="font11 color66">GURU - Đệm hát</span>
                        </div>
                        <div>Bài hát này nghe như một bài tế ấy nhỉ</div>
                        <div>
                            <span class="font11 color66">3.535 Bình luận</span>
                            <a href="#" class="colorDackG">xem thêm</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="lf-avatar">
                        <a href="#"><img src="../images/avatar2.jpg" alt=""></a>
                    </div>
                    <div class="lr-content">
                        <div>
                            <a href="#" class="font-Bold colorDackG">Bachocdientkxx</a>
                            <span class="font11 color66">GURU - Đệm hát</span>
                        </div>
                        <div>Bài hát này nghe như một bài tế ấy nhỉ</div>
                        <div>
                            <span class="font11 color66">3.535 Bình luận</span>
                            <a href="#" class="colorDackG">xem thêm</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="lf-avatar">
                        <a href="#"><img src="../images/avatar2.jpg" alt=""></a>
                    </div>
                    <div class="lr-content">
                        <div>
                            <a href="#" class="font-Bold colorDackG">Bachocdientkxx</a>
                            <span class="font11 color66">GURU - Đệm hát</span>
                        </div>
                        <div>Bài hát này nghe như một bài tế ấy nhỉ</div>
                        <div>
                            <span class="font11 color66">3.535 Bình luận</span>
                            <a href="#" class="colorDackG">xem thêm</a>
                        </div>
                        <ul class="sub-list-cmts">
                            <li>
                                <div class="lf-avatar-sub">
                                    <a href="#"><img src="../images/avatar2.jpg" alt=""></a>
                                </div>
                                <div class="lr-content-sub">
                                    <div>
                                        <a href="#" class="font-Bold colorDackG">Bachocdientkxx</a>
                                        <span class="font11 color66">GURU - Đệm hát</span>
                                    </div>
                                    <div>Bài hát này nghe như một bài tế ấy nhỉ</div>
                                    <div>
                                        <span class="font11 color66">3.535 Bình luận</span>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="lf-avatar-sub">
                                    <a href="#"><img src="../images/avatar2.jpg" alt=""></a>
                                </div>
                                <div class="lr-content-sub">
                                    <div>
                                        <a href="#" class="font-Bold colorDackG">Bachocdientkxx</a>
                                        <span class="font11 color66">GURU - Đệm hát</span>
                                    </div>
                                    <div>Bài hát này nghe như một bài tế ấy nhỉ</div>
                                    <div>
                                        <span class="font11 color66">3.535 Bình luận</span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <div class="lf-avatar">
                        <a href="#"><img src="../images/avatar2.jpg" alt=""></a>
                    </div>
                    <div class="lr-content">
                        <div>
                            <a href="#" class="font-Bold colorDackG">Bachocdientkxx</a>
                            <span class="font11 color66">GURU - Đệm hát</span>
                        </div>
                        <div>Bài hát này nghe như một bài tế ấy nhỉ</div>
                        <div>
                            <span class="font11 color66">3.535 Bình luận</span>
                            <a href="#" class="colorDackG">xem thêm</a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="areatxt" style="border:1px solid #DDD; border-top:none">
        <div class="txt-lf" style="width:80%">
            <textarea></textarea>
        </div>
        <div class="txt-lr" style="width:20%">
            <input type="submit" value="gửi" name="gửi">
        </div>
    </div>
</div>
<div id="tabs-5" class="tab-pane fade" role="tabpanel">
    <div class="notes Pd10">
        <div class="ct-ha" style="width:auto">
            @if(!empty($data['lesson']->chord))
            @else
            Chưa có hợp âm
            @endif
        </div>
    </div>
</div>
<!--Tabs end-->
<!--Bài giảng liên quan-->
<div class="MgT20">
    @include('frontend/lessons/includes/lesson-same-category',array('cLessons'=>$data['c_lessons']))
</div>
<!--end Bài giảng liên quan-->
<!--Top Gương mặt quán quân-->
<div class="MgT20">
@include('frontend/lessons/includes/lesson-same-user',array('uLessons'=>$data['u_lessons']))
</div>
<!--end Gương mặt quán quân-->
</div>
<!--end content right-->
@stop